<template>
  <van-form @submit="check">
    <van-field
      v-model="business.email"
      name="email"
      label="邮箱"
      placeholder="请输入邮箱"
      readonly
      :rules="[
        {required: true, message: '请输入邮箱'},
        {pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式不正确'}
      ]"
    />

    <van-field
      v-model="vercode"
      name="vercode"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
      :rules="[
        {required: true, message: '请输入短信验证码'}
      ]"
    >
      <template #button>
        <van-button size="small" type="primary" @click="send" :disabled="disabled">{{msg}}</van-button>
      </template>
    </van-field>

    <div style="width:50%;margin:2em auto;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
  const {proxy} = getCurrentInstance()

  let business = proxy.$business
  let vercode = ref('')
  let msg = ref('发送验证码')
  let disabled = ref(false)

  //邮箱发送
  const send = async () => 
  {
    msg.value = '正在发送中.....'
    disabled.value = true
    msg.value = 60

    const result = await proxy.$GET({
      url:'/business/auth'
    })
    if(result.code==0){
      showFailToast({
          message: result.msg,
          duration: 1000,
      })
    }else{
      if(result.code==-1){
        showFailToast({
          message: result.msg,
          duration: 1000,
        })
      }else{
        showSuccessToast({
          message: result.msg,
          duration: 1000,
        })
      }
      var T = setInterval(() => {
        if(msg.value <= 0)
        {
          //停止定时器
          clearInterval(T)
          msg.value = '重新发送验证码'
          disabled.value = false
        }else
        {
          msg.value--
        }
      }, 100)
    }
    

  }

  //邮箱验证
  const check = async (values) =>
  {
    const result = await proxy.$POST({
      url:'/business/auth',
      params:values
    })
    if(result.code==1){
      showSuccessToast({
        message: '验证成功',
        onClose: () => 
        {
          proxy.$router.go(-1)
        }
      })
    }else{
      showFailToast({
        message: result.msg,
        duration: 1000,
      })
    }
    
  }
</script>